<!DOCTYPE html>
<html lang="en">

<head>
    <title>大兴区图书馆</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="shortcut icon" type="image/x-icon" href="./images/icon.png" media="screen" />
    <!-- style -->
    <link href="./css/bootstrap.min.css" rel="stylesheet" />
    <link href="./css/font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="./css/bigscreen.css" />
    <link href="./css/main.css" rel="stylesheet" />
</head>

<body>
    <section class="section-01">
        <!--logo 标题开始-->
        <div id="area1">
            <div class="app-logo">
                <img src="./images/icon.png" class="app-logo-img" />
            </div>
            <div class="app-title">
                <span class="main-title">大兴区图书馆</span>
                <br/>
                <span class="main-title">DAXING DISTRICT LIBRARY</span>
            </div>
        </div>
        <!--logo 标题结束-->

        <!--读者排名开始-->
        <div id="area4">
            <h3 class="current-date">当前日期：2017年6月7日</h3>
            <!--今天排名开始-->
            <h1 class="reader">
                您是今天第&nbsp;
                <span id="cin" class="hugeNum">3823</span>&nbsp;位读者
            </h1>
            <!--今天排名结束-->
            <!--其余排名开始-->
            <div class="range">
                <div class="users1">
                    <p>本周到馆人数:</p>
                    <span>1120 人</span>
                    <div class="clearfix"></div>
                    <div class="progress progress_bg" style="width:76%;">
                        <div class="progress-bar progress_define" role="progressbar" data-transitiongoal="80" aria-valuenow="79" style="width: 60%;"></div>
                    </div>
                </div>
                <div class="users1">
                    <p>上月到馆人数:</p>
                    <span>231809 人</span>
                    <div class="clearfix"></div>
                    <div class="progress progress_bg" style="width:76%;">
                        <div class="progress-bar progress_define" role="progressbar" data-transitiongoal="80" aria-valuenow="79" style="width: 80%;"></div>
                    </div>
                </div>
                <div class="users1">
                    <p>本月到馆人数:</p>
                    <span>68646 人</span>
                    <div class="clearfix"></div>
                    <div class="progress progress_bg" style="width:76%;">
                        <div class="progress-bar progress_define" role="progressbar" data-transitiongoal="80" aria-valuenow="79" style="width: 65%;"></div>
                    </div>
                </div>
                <div class="users1">
                    <p>累计到馆人数:</p>
                    <span>38231809 人</span>
                    <div class="clearfix"></div>
                    <div class="progress progress_bg" style="width:76%;">
                        <div class="progress-bar progress_define" role="progressbar" data-transitiongoal="80" aria-valuenow="79" style="width: 89%;"></div>
                    </div>
                </div>
            </div>
            <!--其余排名结束-->
        </div>
        <!--读者排名结束-->

        <!--入馆指南开始-->
        <div id="area7">
            <h1 class="heading guide-header">
                <b>入馆指南</b>
            </h1>
            <div class="clearfix"></div>
            <p class="guide-content">大兴区图书馆是读者阅览图书、搜寻资讯及参与读书活动的公共场所，是传播精神文明的重要窗口，因此图书馆的工作需要得到广大读者的支持和配合。为让广大读者享有舒适安静的阅读环境，享受到亲切温馨的服务，请到馆读者做到：
            </p>
            <p class="guide-content">1.讲文明，入馆时衣着整洁，不穿拖鞋、背心；
                <br/ 2.讲卫生，严禁在馆内吸烟、饮食、随地吐痰、乱扔垃圾；<br/>3.保持馆区安静，请勿在馆内喧哗及睡眠，严禁携带宠物及危险品进馆，不在馆内张贴广告、散发传单或推销商品。入馆请将电话等通讯设施置于静音状态。
                <br/>4.随身携带的包及其它与借阅无关的物品请寄放免费存包处，自带物品如有遗失，本馆恕不负责。
                <br/>5.爱惜各种资源及设施，如书籍、电脑、耳机等，损坏按规定赔偿。
                <br/>6.阅览区座位只供读者使用本馆馆藏，请勿以私人物品霸占阅览区座位。
                <br/>7.请尊重知识产权，不得自带复制设备自行复制本馆文献；珍贵文献原则上不得复印。。
                <br/>8.团体参观者，请提前与本馆预约；未经准许的团体于馆内进行非图书馆阅读活动者，本馆有权制止。
                <br/>遇有紧急事件发生时，请馆内读者依照工作人员的指引避难或疏散。
                <br/>请自觉遵守图书馆各项规定，配合工作人员管理。
                <br/>
            </p>
        </div>
        <!--入馆指南结束-->
    </section>
    <section class="section-02">
        <!--天气+入馆/出馆/在管人数开始-->
        <div id="area2">
            <!-- 天气开始 -->
            <iframe allowtransparency="true" class="center-block" frameborder="0" width="410" height="80" scrolling="no" src="http://tianqi.2345.com/plugin/widget/index.htm?s=2&z=1&t=1&v=0&d=2&bd=0&k=000000&f=ffffff&q=1&e=1&a=0&c=54511&w=410&h=98&align=center"></iframe>
            <!-- 天气结束 -->
            <!--入馆/出馆/在管人数开始-->
            <div class="row area2-content">
                <div class="col-sm-4 col-xs-4">
                    <h3 class="heading alignCenter area2-head">
                        <b>入馆人数</b>
                    </h3>
                    <h3 class="redColor alignCenter area2-number">
                        <b>231,809</b>
                    </h3>
                </div>
                <div class="col-sm-4 col-xs-4">
                    <h3 class="heading alignCenter area2-head">
                        <b>出馆人数</b>
                    </h3>
                    <h3 class="redColor alignCenter area2-number">
                        <b>231,809</b>
                    </h3>
                </div>
                <div class="col-sm-4 col-xs-4">
                    <h3 class="heading alignCenter area2-head">
                        <b>在馆人数</b>
                    </h3>
                    <h3 class="redColor alignCenter area2-number">
                        <b>231,809</b>
                    </h3>
                </div>
            </div>
            <!--入馆/出馆/在管人数结束-->
        </div>
        <!--天气+入馆/出馆/在管人数结束-->

        <!--实时入馆人数开始-->
        <div id="area5">
            <div id="entrance" data-highcharts-chart="121">
            </div>
        </div>
        <!--实时入馆人数结束-->

        <!--借还书总量、接待人次、藏书开始-->
        <div id="area8">
            <!--借还书总量开始-->
            <div class="row area8-row">
                <div class="col-sm-6 col-xs-6 center-block">
                    <div class="center-block area8-top-icon-wrapper">
                        <div class="area8-top-text-wrapper">
                            <div class="count-return">159395</div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-xs-6">
                    <div class="center-block area8-top-icon-wrapper">
                        <div class="area8-top-text-wrapper">
                            <div class="count-return">159395</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row area8-row">
                <div class="col-sm-6 col-xs-12">
                    <h3 class="heading alignCenter area8-center-head">
                        <b>还入总册数：</b>
                    </h3>
                    <h3 class="alignCenter area8-center-count">231,809</h3>
                </div>
                <div class="col-sm-6 col-xs-12">
                    <h3 class="heading alignCenter area8-center-head">
                        <b>借出总册数：</b>
                    </h3>
                    <h3 class="alignCenter area8-center-count">231,809</h3>
                </div>
            </div>
            <!--借还书总量结束-->
            <!--接待人次、藏书开始-->
            <div class="row area8-row">
                <div class="col-sm-6 col-xs-12">
                    <h3 class="alignCenter area8-bottom-head">
                        <b>2016年接待读者人次：</b>
                    </h3>
                    <h3 class="alignCenter area8-bottom-count">1007385</h3>
                </div>
                <div class="col-sm-6 col-xs-12">
                    <h3 class="alignCenter area8-bottom-head">
                        <b>馆藏纸质图书册数：</b>
                    </h3>
                    <h3 class="alignCenter area8-bottom-count">425840</h3>
                </div>
            </div>
            <!--接待人次、藏书结束-->
        </div>
        <!--借还书总量、接待人次、藏书结束-->
    </section>
    <section class="section-03">
        <!--借阅此时排行榜开始-->
        <div id="area3">
            <h3 class="heading area3-head" id="borrowRank">
                <b>借阅次数排行</b>
            </h3>
            <div id="chartborrow" class="area3-content" data-highcharts-chart="122"></div>
        </div>
        <!--借阅此时排行榜结束-->

        <!--外借文献分布图开始-->
        <div id="area6" class="bookcirculation">
            <h3 class="heading area6-head">
                <b>外借文献分布图</b>
            </h3>
            <div id="chartCategory" style="width:100%; height:100%; border: 0px solid yellow;" data-highcharts-chart="120">
            </div>
        </div>
        <!--外借文献分布图结束-->

        <!--新书推荐开始-->
        <div id="area9">
            <h3 class="heading area9-head">
                <b>新书推荐</b>
            </h3>
            <div class="area9-content">
                <div id="area9-1">
                    <div class="area9-image">
                        <img src="./images/bookcover-1.jpg" />
                    </div>
                    <div class="area9-desc">
                        <span id="book_intro1" class="area9-desc-text">简介：冯导将新书取名为“不省心”，冯导坦言，一方面自己的火爆脾气的确让很多人“不省心”，但是反观之，无论是电影的拍摄过程、票房压力还是小道消息的无端诽谤，也都让冯导感到“不省心”。</span>
                    </div>
                </div>
                <div id="area9-2">
                    <div class="area9-image">
                        <img src="./images/bookcover-2.jpg" />
                    </div>
                    <div class="area9-desc">
                        <span id="book_intro2" class="area9-desc-text">简介: 小说讲述了一个动听的而又近人情的故事。小说里，从腐旧的家庭里走出来的流苏，香港之战的洗礼并不曾将她感化成为革命女性；香港之战影响范柳原，使他转向平实的生活，终于结婚了，但结婚并不使他变成圣人，完全放弃往日的生活习惯与作风。</span>
                    </div>
                </div>
                <div id="area9-3">
                    <div class="area9-image">
                        <img src="./images/bookcover-3.jpg" />
                    </div>
                    <div class="area9-desc">
                        <span id="book_intro3" class="area9-desc-text">简介: 莉迪亚死了，可他们还不知道。莉迪亚是家中老二，李先生和李太太的掌上明珠，她遗传了母亲的蓝眼睛和父亲的黑头发。父母深信，莉迪亚一定能实现他们无法实现的梦想。莉迪亚的尸体被发现后，她的父亲内疚不已，母亲则一心报复。</span>
                    </div>
                </div>
                <div id="area9-4">
                    <div class="area9-image">
                        <img src="./images/bookcover-4.jpg" />
                    </div>
                    <div class="area9-desc">
                        <span id="book_intro4" class="area9-desc-text">简介: 在纪念甲午战争120周年之际，新华社解放军分社与参考消息报社联合策划“军事名家的甲午殇思”专栏，邀请28位将校级军事名家分别从学术、制度建设、战略战术、文化等多种角度，从不同角度反思甲午战争的教训与启示。</span>
                    </div>
                </div>
            </div>
        </div>
        <!--新书推荐结束-->
    </section>

    <!-- javascripts -->
    <script type="text/javascript" src="./js/jquery-2.2.0.js"></script>
    <script type="text/javascript" src="./js/jsdate.js"></script>
    <script type="text/javascript" src="./js/echarts.min.js"></script>
    <script type="text/javascript" src="./js/highcharts/highcharts.js"></script>
    <script type="text/javascript" src="./js/highcharts/3d.js"></script>
    <script type="text/javascript" src="./js/highcharts/data.js"></script>
    <script type="text/javascript" src="./js/highcharts/exporting.js"></script>
    <script type="text/javascript" src="./js/pub.js"></script>
    <script type="text/javascript" src="./js/bigscreen.js"></script>
    <script>
        bigscreen.InitPage();
    </script>
</body>

</html>